/* @flow */
import React, { type Node } from 'react';
import { createAction, createActions, handleActions, type ActionType } from 'redux-actions';
import produce from 'immer';
import { Icon } from 'antd';
/* ACTION TYPES */
// drag
const START_DRAGGING = 'common/drag/START_DRAGGING';
const END_DRAGGING = 'common/drag/END_DRAGGING';
const SET_DRAGGING_OVER = 'common/drag/SET_DRAGGING_OVER';
const CLEAR_DRAGGING_OVER = 'common/drag/CLEAR_DRAGGING_OVER';
// tree
const CHANGE_TREE_OPEN = 'common/tree/CHANGE_TREE_OPEN';
// editable item
const ENABLE_EDITABLE = 'common/editable/ENABLE_EDITABLE';
const DISABLE_EDITABLE = 'common/editable/DISABLE_EDITABLE';

/* ACTION PAYLOADS */

/* EXPORTING ACTION CREATORS / ACTION CREATORS TYPES */
export interface CommonActionCreators {
  startDragging(value: string): any;
  endDragging(): any;
  setDraggingOver(value: string): any;
  clearDraggingOver(): any;
  changeTreeOpen(payload: string): any;
  enableEditable(payload: string): any;
  diableEditable(payload: string): any;
}
/* ACTION CREATORS */

export const actionCreators: CommonActionCreators = {
  startDragging: createAction(START_DRAGGING, (payload: Array<string>) => payload),
  endDragging: createAction(END_DRAGGING),
  setDraggingOver: createAction(SET_DRAGGING_OVER, (payload: string) => payload),
  clearDraggingOver: createAction(CLEAR_DRAGGING_OVER),
  changeTreeOpen: createAction(CHANGE_TREE_OPEN, (payload: string) => payload),
  enableEditable: createAction(ENABLE_EDITABLE, (payload: string) => payload),
  diableEditable: createAction(DISABLE_EDITABLE, (payload: string) => payload),
};
/* ACTION FLOW TYPE */
type StartDraggingAction = ActionType<typeof actionCreators.startDragging>;
type EndDraggingAction = ActionType<typeof actionCreators.endDragging>;
type SetDraggingOverAction = ActionType<typeof actionCreators.setDraggingOver>;
type ClearDraggingOverAction = ActionType<typeof actionCreators.clearDraggingOver>;
type ChangeTreeOpenAction = ActionType<typeof actionCreators.changeTreeOpen>;
type EnableEditableAction = ActionType<typeof actionCreators.enableEditable>;
type DiableEditableAction = ActionType<typeof actionCreators.diableEditable>;

/* State Types */
type thingsData = {
  icon: Node,
  title: string,
  href: string,
};
export type Common = {
  menu: {
    collapsed: boolean,
    ThingsDatas: Array<thingsData>,
  },
  draggable: {
    draggingItems: Array<string>,
    draggingOverItem: string,
    isDragging: boolean,
  },
  tree: {
    canCheckTypes: Array<string>,
    openedIds: Array<string>,
    checkIds: Array<string>,
  },
  editable: {
    EditableIds: Array<string>,
  },
};

const initialState: Common = {
  menu: {
    collapsed: false,
    ThingsDatas: [
      { icon: <Icon type="inbox" theme="outlined" />, title: 'Inbox', href: '/thins/inbox' },
      {
        icon: <Icon type="ordered-list" theme="outlined" />,
        title: 'Action',
        href: '/things/action',
      },
      { icon: <Icon type="tags" theme="outlined" />, title: 'Context', href: '/things/context' },
      {
        icon: <Icon type="calendar" theme="outlined" />,
        title: 'Forest',
        href: '/things/calendar',
      },
      { icon: <Icon type="flag" theme="outlined" />, title: 'Flag', href: '/things/flag' },
    ],
  },
  draggable: {
    draggingItems: [],
    draggingOverItem: '',
    isDragging: false,
  },
  tree: {
    canCheckTypes: [],
    openedIds: [],
    checkIds: [],
  },
  editable: {
    EditableIds: [],
  },
};

export default handleActions(
  {
    [START_DRAGGING]: (state, action: StartDraggingAction) => {
      return produce(state, (draft) => {
        draft.tree.draggingItems = action.payload;
        draft.tree.isDragging = true;
      });
    },
    [END_DRAGGING]: (state) => {
      return produce(state, (draft) => {
        draft.tree.draggingItems = [];
        draft.tree.isDragging = false;
        draft.tree.draggingOverItem = '';
      });
    },
    [SET_DRAGGING_OVER]: (state, action: SetDraggingOverAction) => {
      return produce(state, (draft) => {
        if (!action || !draft) return;
        draft.tree.draggingOverItem = action.payload;
      });
    },
    [CLEAR_DRAGGING_OVER]: (state) => {
      return produce(state, (draft) => {
        draft.tree.draggingOverItem = '';
      });
    },
    [CHANGE_TREE_OPEN]: (state, action: ChangeTreeOpenAction) => {
      return produce(state, (draft) => {
        if (!action || !draft) return;
        // console.log(action.payload);
        if (draft.tree.openedIds.indexOf(action.payload) === -1) {
          draft.tree.openedIds.push(action.payload);
        } else {
          draft.tree.openedIds.splice(draft.tree.openedIds.indexOf(action.payload), 1);
        }
        draft.tree.openedIds = draft.tree.openedIds;
      });
    },
    [ENABLE_EDITABLE]: (state, action: EnableEditableAction) => {
      return produce(state, (draft) => {
        if (!action || !draft) return;
        if (draft.editable.EditableIds.indexOf(action.payload) === -1) {
          draft.editable.EditableIds.push(action.payload);
        }
        draft.editable.EditableIds = draft.editable.EditableIds;
      });
    },
    [DISABLE_EDITABLE]: (state, action: DiableEditableAction) => {
      return produce(state, (draft) => {
        if (!action || !draft) return;
        if (draft.editable.EditableIds.indexOf(action.payload) !== -1) {
          draft.editable.EditableIds.splice(draft.editable.EditableIds.indexOf(action.payload), 1);
        }
        draft.editable.EditableIds = draft.editable.EditableIds;
      });
    },
  },
  initialState,
);

// export function* RootSaga() {
//     console.log('sample Hello Sagas!');
// }
